<template>
  <div class="notFound">
    <el-drawer :title="title"
               :visible.sync="drawerVisible"
               :modal-append-to-body="false"
               :append-to-body="true"
               :destroy-on-close="true"
               :wrapperClosable="false"
               :before-close="handleClose"
               size="70%">
      <div class="drawerBody">

        <el-row class="check-search">
          <el-form :model="checkQuery" ref="checkForm" label-width="100px" inline>
            <el-form-item prop="platform">
              <div slot="label">
                <el-checkbox v-model="checkTable.platform" @change="changeTableColumn($event,'platform')">媒体
                </el-checkbox>
              </div>
              <el-select size="mini" v-model="checkQuery.platform" placeholder="请选择媒体" clearable filterable  style="width: 140px"
                         ref="performPlatform" @change="submitCheckForm">
                <el-option v-for="item in checkInit.platformList"
                           :key="item.dictKey"
                           :label="item.dictValue"
                           :value="item.dictKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="country">
              <div slot="label">
                <el-checkbox v-model="checkTable.country" @change="changeTableColumn($event,'country')">投放地区
                </el-checkbox>
              </div>
              <el-select size="mini" v-model="checkQuery.countryList" placeholder="请选择投放地区" clearable filterable
                         ref="performPlatform" @change="submitCheckForm" style="width: 140px">
                <el-option v-for="(item,index) in checkInit.nationList"
                           :key="index"
                           :label="item.dictValue"
                           :value="item.dictKey">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="updateTimeRange">
              <div slot="label">
                <el-checkbox v-model="checkTable.reportDate"
                             @change="changeTableColumn($event,'reportDate')">更新日期
                </el-checkbox>
              </div>
              <el-date-picker
                style="width: 250px"
                size="mini"
                v-model="updateTimeRange"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                ref="performTime" @change="submitCheckForm">
              </el-date-picker>
            </el-form-item>
          </el-form>
        </el-row>
        <div class="check-table">
          <avue-crud :option="checkOption"
                     :data="checkData"
                     :page.sync="page"
                     :table-loading="loading"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     @on-load="onCheckLoad"
          >
            <template slot-scope="{ row }" slot="reportDate">
              <div>{{ formatDate(row.reportDate) }}</div>
            </template>
            <template slot-scope="{ row }" slot="ctr">
              <div>{{ row.ctr == '0.00' ? 0 : row.ctr }}%</div>
            </template>
            <template slot-scope="{ row }" slot="cpa">
              <div>{{ row.cpa == '0.00' ? 0 : row.cpa }}</div>
            </template>
            <template slot-scope="{ row }" slot="cvr">
              <div>{{ row.cvr == '0.00' ? 0 : row.cvr }}%</div>
            </template>
          </avue-crud>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {getDetailList} from "@/api/creativeReport/notFoundCreative";
import Moment from "moment";
import {getSysDictList} from "@/api/system/dict";
import {findObject} from "@/util/util";
import func from "@/util/func";

export default {
  name: "notfoundDetail",
  props: {
    title: {
      type: String
    },
    drawerVisible: {
      type: Boolean
    },
    type: {
      type: String
    },
    checkInit: {
      type: Object
    },
    rowsList: {
      type: Object
    },
    updateTimeRange: {
      type: Array
    }
  },
  data() {
    return {
      checkTable: {
        reportDate: true,
        platform: false,
        country: false,
      },
      checkQuery: {
        platform: "",
        countryList: '',
      },
      putForm: {
        designer: '',
        refuseCreativeId: '',
        originator: '',
        makeTime: {
          hour: '',
          minute: '',
        },
        type: 1
      },
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      checkOption: {
        refreshBtn: false,
        columnBtn: false,
        addBtn: false,
        index: false,
        menu: false,
        selection: false,
        column: [
          {
            label: "更新日期",
            prop: "reportDate",
            hide: false,
          },
          {
            label: "媒体",
            prop: "platform",
            width: 100,
            hide: true,
            type: 'select',
            dataType: 'string',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
          },
          {
            label: "投放地区",
            prop: "country",
            multiple: true,
            type: 'select',
            dataType: 'string',
            dicData: [],
            props: {
              label: "dictValue",
              value: "dictKey"
            },
            width: 100,
            hide: true,
          },
          {
            label: "花费",
            prop: "spend",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "曝光",
            prop: "impressions",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            width: 120,
            // sortable: 'custom',
          },
          {
            label: "点击",
            prop: "clicks",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: "CTR",
            prop: "ctr",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            slot: true,
            sortable: true,
          },
          {
            label: "安装",
            prop: "install",
            rules: [
              {
                required: true,
                trigger: "blur",
              },
            ],
            // sortable: 'custom',
          },
          {
            label: '安装成本',
            prop: 'cpa'
          },
          {
            label: "CVR",
            prop: "cvr",
            rules: [
              {
                required: true,
                message: "请输入CVR",
                trigger: "blur",
              },
            ],
            slot: true,
            sortable: true,
          },
        ],
      },
      checkData: [],
      loading: false,
    }
  },
  methods: {
    formatDate(date) {
      return Moment(date).format('YYYY-MM-DD')
    },
    changeTableColumn(val, type) {
      const index = this.checkOption.column.findIndex(item => item.prop === type);
      this.checkOption.column[index].hide = !this.checkTable[type];
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    /**
     * 搜索查询页面
     */
    submitCheckForm() {
      this.onCheckLoad(this.page)
    },
    /**
     * 查询table
     */
    onCheckLoad(page, params = {}) {
      this.loading = true;
      this.checkQuery['name'] = this.rowsList[0].name;
      this.checkQuery['assetId'] = this.rowsList[0].assetId;
      if (this.updateTimeRange && this.updateTimeRange.length > 0) {
        this.checkQuery['beginDate'] = this.updateTimeRange[0]
        this.checkQuery['endDate'] = this.updateTimeRange[1]
      } else {
        this.checkQuery['beginDate'] = null
        this.checkQuery['endDate'] = null
      }
      getDetailList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.checkQuery))
        .then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.checkData = data.records;
          this.loading = false;
        });
    },
    /**
     * 关闭弹窗
     */
    handleClose(done) {
      if (done) {
        done();
      }
      this.reset();
      this.$emit('close')
    },
    reset() {
      this.page.currentPage = 1;
    }
  },
  created() {
  },
  watch: {
    'checkInit'() {
      let column = findObject(this.checkOption.column, 'country', 'prop');
      if (column != null) {
        column.dicData = this.checkInit.nationList;
      }
      let columnPlatform = findObject(this.checkOption.column, 'platform', 'prop');
      if (columnPlatform != null) {
        columnPlatform.dicData = this.checkInit.platformList;
      }
    },
  },
}
</script>

<style scoped lang="scss">
.notFound {
  /deep/ .el-drawer.rtl {
    overflow: scroll;
  }
}

.check-search {
  margin-top: 1em;

  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}

.drawerBody {
  width: 95%;
  margin: 0 auto;
  border-top: 2px solid #F0F2F5;
  overflow: scroll;
}

.check-table {
  /deep/ .avue-crud__menu {
    min-height: 0;
  }
}
</style>
